<html>

<head>
    <script src="https://g.alicdn.com/bizcharts/io-asserts/3.1.2/react16.0.0.production.min.js"></script>
    <script src="https://g.alicdn.com/bizcharts/io-asserts/3.1.2/react-dom16.0.0.production.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>
    <script type="text/javascript" src="https://gw.alipayobjects.com/os/antv/assets/data-set/0.8.6/data-set.min.js"></script>
    <script src="https://g.alicdn.com/bizcharts/io-asserts/3.1.5/BizCharts.min.js"> </script>
    <style>
        .g2-tooltip {
            position: absolute;
            visibility: hidden;
            white-space: nowrap;
            z-index: 8;
            transition: visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1);
            background-color: rgba(0, 0, 0, 0.65);
            border-radius: 4px;
            color: rgb(255, 255, 255);
            font-size: 12px;
            font-family: -apple-system, BlinkMacSystemFont, &quot;
            Segoe UI&quot;
            ,
            Roboto,
            &quot;
            Helvetica Neue&quot;
            ,
            Helvetica,
            &quot;
            PingFang SC&quot;
            ,
            &quot;
            Hiragino Sans GB&quot;
            ,
            &quot;
            Microsoft YaHei&quot;
            ,
            SimSun,
            sans-serif;
            line-height: 20px;
            padding: 10px 10px 6px;
            "

        }
    </style>
</head>

<body>
    <div id="mountNode">
        <div>
            <div>
                <div style="position:relative;">
                    <canvas id="canvas_1" width="870" height="400" style="width: 870px; height: 400px;"></canvas>
                    <div class="g2-tooltip">
                        <div class="g2-tooltip-title"></div>
                        <ul class="g2-tooltip-list"></ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/babel">
        const { Chart, Axis, Geom, Tooltip, Legend, View } = window.BizCharts;
        const data = [
        { time: '0-1点', new: 3.0, old: 3.9, total: 6.9 },
        { time: '1-2点', new: 7.0, old: 3,  total: 10 },
        { time: '2-3点', new: 12, old: 4.2,  total: 16.2 },
        { time: '3-4点', new: 6.9, old: 4.2 },
        { time: '4-5点', new: 9.5, old: 5.7 },
        { time: '5-6点', new: 9.5, old: 5.7 },
        { time: '6-7点', new: 14.5, old: 8.5 },
        { time: '7-8点', new: 14.5, old: 8.5 },
        { time: '8-9点', new: 18.4, old: 11.9 },
        { time: '9-10点', new: 18.4, old: 11.9 },
        { time: '10-11点', new: 21.5, old: 15.2 },
        { time: '11-12点', new: 21.5, old: 15.2 },
        { time: '12-13点', new: 6.9, old: 4.2 },
        { time: '13-14点', new: 6.9, old: 4.2 },
        { time: '14-15点', new: 9.5, old: 5.7 },
        { time: '15-16点', new: 9.5, old: 5.7 },
        { time: '16-17点', new: 14.5, old: 8.5 },
        { time: '17-18点', new: 14.5, old: 8.5 },
        { time: '18-19点', new: 18.4, old: 11.9 },
        { time: '19-20点', new: 18.4, old: 11.9 },
        { time: '20-21点', new: 21.5, old: 15.2 },
        { time: '21-22点', new: 21.5, old: 15.2 },
        { time: '22-23点', new: 21.5, old: 15.2 },
        { time: '23-0点', new: 21.5, old: 15.2 }, 
      ];
      // { time: '23-0点', income: 'new', flow: '21.5'},
      // { time: '23-0点', income: 'old', flow: '15.2'},
      const ds = new DataSet();
      const dv = ds.createView().source(data);
      dv.transform({
        type: 'fold',
        fields: [ 'old', 'new' ], // 展开字段集
        key: 'income', // key字段
        value: 'flow', // value字段
      });

       const dv2 = ds.createView().source(data);
      dv2.transform({
       type: 'map',
       callback(row) {
           return {
               time: row.time,
               flow: row.new + row.old
           }
       }
      });
      
      console.log(dv);
      console.log(dv2);
      const cols = {
        time: {
          range: [ 0.05, 0.95 ]
        }
      }
      ReactDOM.render((
          <div>
            <Chart height={400} data={dv} scale={cols} forceFit>
                <Legend />
                <Axis name="time" />
                <Axis name="flow" />
                <Tooltip crosshairs={{type : "y"}}/>
                <Geom type="interval" adjust={'stack'} shape='rect' position="time*flow" size={30} color='income' opacity={1} />
                <Geom type="lineStack" shape={'smooth'} position="time*flow" color={'income'} size={2} />
                <Geom type='pointStack' shape={'circle'} position="time*flow" size={3}  color={'income'} style={{ stroke: '#fff', lineWidth: 1}} />
            </Chart>
            </div>
      ), document.getElementById("mountNode"));
    </script>

</body>

</html>